Should we not always show the breadcrumbs? Otherwise mobile users can not navigate, no?
And for mobile let the uploader progress wrap (second line below breadcrumbs).

Maybe instead of breadcrumbs show a select component with the paths as option on small mobile?

@susnux I changed the title and description of the PR to match the changes you suggested now! On mobile / small screens, we just wrap the progress bar on a newline now :) Reasoning for the 512px is because we use this size here :

Yup, I agree @susnux . Just testing it out, and the overflow can get quite clunky here and there. The solution you proposed on the design team is good to me!

Here is a video in case you need to showcase what you mean to designers.

What is missing is making the uploader "new" button icon only on <370px width. But this needs to be fixed on the library I think.

Considering the changes and the discussion here, please loop the design team in before any approval or merge :)

Considering the changes and the discussion here, please loop the design team in before any approval or merge :)

Already done in design chat

CC @nextcloud/designers what do you think? The very small breakpoint (icon only new-button) is not implemented as this needs fixes on the library.

Full bread crumbs with share button	full bread crumbs without share button	Icon only first breadcrumb	Smallest possible bread crumbs with full new-button

And this would be a mock of our smallest supported width of 300px, here I made the new-button icon only and reduced the min-width of the last breadcrumb to 72px so it does not overlap with the button:

@jancborchardt That can definitely be done! Just needs to be changed here within this logic, AFAIK :) :

https://github.com/nextcloud-libraries/nextcloud-vue/blob/d11028854b8cceba83725e417eb7b3563bcc2832/src/components/NcBreadcrumbs/NcBreadcrumbs.vue#L291-L299

However, just as a counterpoint, the last breadcrumb already just shows the user the directory they are in. Clicking on it just would take them to the same place - so isn't it more useful to have all files stay? Plus, we would be able to keep the cool icon :)

I do not have a huge opinion on this, so whatever you decide is best :)

So AFAIK, the changes that are needed for the breadcrumb are all library-dep changes.... so for the time being, anyone want to give this PR a green check 👀💚

However, just as a counterpoint, the last breadcrumb already just shows the user the directory they are in. Clicking on it just would take them to the same place - so isn't it more useful to have all files stay?

It not only is a link though, it also is the only place where we show the name of the folder you are in. And that is more important to know than to quickly go back to "All files". :) (Good for asking though!)

So I would say we start with this one and the either move the "all files" into the overflow menu (nextcloud-vue changes) or make the "new +" button icon only (nextcloud-upload change) later?

So I would say we start with this one and the either move the "all files" into the overflow menu (nextcloud-vue changes) or make the "new +" button icon only (nextcloud-upload change) later?

I agree! This PR gets the mobile view to have correct reactivity, then we can improve it even further by what you mentioned. I will tackle the nextcloud-vue library, do you want to tackle the upload-library?

Related cypress

  1) Files: Live photos
       'Show hidden files' is enabled
         Restores files when restoring the .jpg:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-cy-files-content-breadcrumbs]`, but never found it.
      at n (webpack://nextcloud/./cypress/e2e/files/FilesUtils.ts:119:7)
      at Context.eval (webpack://nextcloud/./cypress/e2e/files/live_photos.cy.ts:147:12)

  2) Files: Live photos
       'Show hidden files' is enabled
         Blocks restoration when restoring the .mov:
     AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-cy-files-content-breadcrumbs]`, but never found it.
      at n (webpack://nextcloud/./cypress/e2e/files/FilesUtils.ts:119:7)
      at Context.eval (webpack://nextcloud/./cypress/e2e/files/live_photos.cy.ts:158:12)

Weird, we did not change anything that should be breaking the cypress 🙈 Will investigate and re-run to see if what works!

EDIT: Trying a rebase?? Cypress seems weird rn...

@emoral435

) Files: Live photos
'Show hidden files' is enabled
Restores files when restoring the .jpg:
AssertionError: Timed out retrying after 4000ms: Expected to find element: [data-cy-files-content-breadcrumbs], but never found it.
at n (webpack://nextcloud/./cypress/e2e/files/FilesUtils.ts:119:7)
at Context.eval (webpack://nextcloud/./cypress/e2e/files/live_photos.cy.ts:147:12)

Cypress seems to be related

The backport to stable29 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable29
git pull origin stable29

# Create the new backport branch
git checkout -b backport/44450/stable29

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick de47a9ef f6b1fd41 0213fb6b c252ee55

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/44450/stable29

Error: Failed to push branch backport/44450/stable29: fatal: could not read Username for 'https://github.com': No such device or address

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.

/backport to stable29